<template>
  <div v-loading="loading">
    <el-card>
      <el-col>
        <el-button v-if="editFlag" size="small" type="primary" @click="confirmData()">{{ $t('save') }}</el-button>
        <el-button size="small" @click="closeTab()">{{ $t('close') }}</el-button>
      </el-col>
      <el-col :span="24" :style="'margin-top: 10px;'">
        <fm-generate-form
          :data="jsonData"
          :remote="remoteFuncs"
          :value="editData"
          :remote-option="dynamicData"
          ref="generateForm"
          :key="key"
        >
        </fm-generate-form>
      </el-col>
    </el-card>
  </div>
</template>

<script>
import debounce from 'lodash/debounce'
import mainContent from '@/views/main-content'

var content = mainContent

export default {
  data () {
    return {
      loading: false,
      jsonData: {
        'list': [],
        'config': {
          'labelWidth': 100,
          'labelPosition': 'right',
          'size': 'small',
          'customClass': '',
          'ui': 'element',
          'layout': 'horizontal',
          'labelCol': 3
        }
      },
      editFlag: true,
      bizId: '',
      editData: {},
      remoteFuncs: {},
      dynamicData: {},
      key: this.$xeutils.timestamp(),
      formData: {},
      dictDataList: []
    }
  },
  created () {
    // 通过路由参数pid, 控制列表请求操作
    this.formData.id = this.$route.params.id
    this.loading = true
    this.getFormInfo()
    let self = this
    self.remoteFuncs = {
      // 远程方法调用其他js 一定要用 self
      func_test (resolve) {
        resolve(self.$getDictList('FORM_CLASS', true))
      }
    }
    if (this.$route.params.bizId) {
      this.bizId = this.$route.params.bizId
      this.editFlag = false
      this.getBizInfo()
    }
  },
  methods: {
    // 获取表单信息
    getFormInfo () {
      this.$http.get(`/drs/drsFormDef/${this.formData.id}`).then(({ data: res }) => {
        this.loading = false
        if (res.code !== 0) {
          return false
        }
        this.formData = res.data
        this.jsonData = res.data.formContentObj
        this.$nextTick(() => {
          this.key = this.$xeutils.timestamp()
        })
      }).catch(() => {})
    },
    // 获取表单业务数据
    getBizInfo () {
      this.$http.get(`/drs/drsFormDef/${this.formData.id}`).then(({ data: res }) => {
        this.loading = false
        if (res.code !== 0) {
          return false
        }
        this.editData = res.data
        this.$nextTick(() => {
          this.key = this.$xeutils.timestamp()
        })
      }).catch(() => {})
    },
    // 关闭 tab
    closeTab () {
      content.methods.tabRemoveHandle(this.$route.name)
      this.$emit('refreshDataList')
    },
    confirmData () {
      this.$refs.generateForm.getData().then(data => {
        let postData = {}
        // 表单定义数据
        postData.formData = {
          formCode: this.formData.formCode,
          formName: this.formData.formName,
          formId: this.formData.id,
          modelCode: this.formData.modelCode,
          // 组装业务描述 根据表单实际情况
          bizDesc: data.name + '-' + data.code
        }
        // 表单业务数据
        postData.objData = data
        this.dataFormSubmitHandle(postData)
      })
    },
    // 表单提交
    dataFormSubmitHandle: debounce(function (data) {
      this.$http['post']('/drs/drsFormInst/saveBizData', data).then(({ data: res }) => {
        if (res.code !== 0) {
          return false
        }
        this.$message({
          message: this.$t('prompt.success'),
          type: 'success',
          duration: 500,
          onClose: () => {
            this.closeTab()
          }
        })
      })
    }, 1000, { 'leading': true, 'trailing': false })
  }
}
</script>
